<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .two{
            color: red;
            font-size: 45px;
            font-family: 隶书;
        }
    </style>
    <script type="text/javascript">
        //给第一个p 添加  color: blue; font‐size: 30px; font‐family: 楷体;
        function changeCss () {
            //获取标签对象
            let p1Obj = document.getElementById("first");
            //设置标签上的css样式
            p1Obj.style.color = "blue";
            p1Obj.style.fontSize = "30px";
            p1Obj.style.fontFamily = "楷体";
        }

        //通过操作calss属性添加样式
        function changeClass () {
            //获取标签对象
            let p2Obj = document.getElementById("second");
            //给p2标签添加class属性,属性值为 two
            p2Obj.className = "two";
        }
    </script>
</head>

<body>
    <p id="first">
        这是第一自然段
    </p>
    <p id="second">
        这是第二自然段
    </p>
    <input type="button"  value="改变几个样式" onclick="changeCss()"/>
    <input type="button"  value="改变类样式" onclick="changeClass()"/>
</body>
</html>